<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <%@include file="/WEB-INF/views/header.jsp" %>
    <script>
        $("#subject_nav").addClass("active")
    </script>
    <title>微学习</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/index.css"/>
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/plugins/bootstrap4/css/bootstrap.min.css"/>

    <link rel="stylesheet" href="${base}/plugins/dropload/dropload.css">
    <script src="${base}/plugins/dropload/dropload.min.js"></script>
</head>
<body>


<style>
    .data-content .content { /*强制文本在一行内显示*/
        /*white-space:nowrap;*/
        width: 90% !important;
        /*溢出内容为隐藏*/
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        /*-moz-binding:url('ellipsis.xml#ellipsis');*/
        padding: 20px;
        margin: 10px 5px;
    }

    .article-item {
        margin-top: 20px;
    }

    .article-item .content {
        line-height: 20px;
        max-height: 200px;
    }

    .article-item .content {
        /*溢出内容为隐藏*/
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    .content p {
        margin-bottom: 20px !important;
    }

    .data-content h1 {
        color: #29B4F0;
        text-decoration: none;
        font-size: 30px;
    }

    .node-header {
        font-size: 15px;
        color: #ccc;
    }

</style>


<div class="d-flex flex-row" style="background-color: #eeeeee">
    <div style="flex:7; width:70%; ">
        <div class="d-flex p-3 m-3 bg-light">
            <h3>${outline.o_name}</h3>
        </div>

        <div id="articles" class="d-flex p-3 m-3 bg-light">


            <div class="data-content col-md-12" style="padding:0 10px; margin-top:-20px;">
                <c:forEach items="${articles}" var="a">
                    <div class="article-item card p-2">
                        <h1 class="">${a.article_title}</h1>
                        <div class="d-flex node-header">
                            <div>
                                <span>作者：${a.author.te_name}</span>&nbsp;&nbsp;
                                <span>日期：<fmt:formatDate value="${a.article_release_time}"
                                                         pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate></span>&nbsp;&nbsp;
                                <span class="icon"> &#xe662; ${a.article_zan}</span>&nbsp;&nbsp;
                                <span class="icon"> &#xe71b; ${a.article_read_count}</span>
                            </div>
                        </div>

                        <div class="card-body">
                            <div class="content">${a.article_content}</div>

                            <a href="${base}/article/detail?id=${a.article_id}" class="card-link">阅读全文</a>
                        </div>

                    </div>

                </c:forEach>
            </div>
        </div>
    </div>

    <%@include file="/WEB-INF/views/linkNav.jsp" %>

</div>
<%@include file="/WEB-INF/views/footer.jsp" %>
</body>

<script>
</script>
</html>
